<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
		<style>
			.mui-card .mui-control-content {
				padding: 10px;
			}
			
			.mui-control-content {
				height: 150px;
			}
			.mui-table h4,.mui-table h5,.mui-table .mui-h5,.mui-table .mui-h6,.mui-table p{
						margin-top: 0;
				}
				.mui-table h4{
						line-height: 21px;
						font-weight: 500;
				}
		
				.mui-table .oa-icon{
						position: absolute;
						right:0;
						bottom: 0;
				}
				.mui-table .oa-icon-star-filled{
						color:#f14e41;
				}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div style="padding: 10px 10px;">
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" href="#item1">待办任务（8）</a>
					<a class="mui-control-item" href="#item2">已办任务</a>
				</div>
			</div>
			<div>
				<button type="button" class="mui-btn mui-btn-primary"  onclick="goAdd()">发布任务</button>
			</div>
			<div>
				<div id="item1" class="mui-control-content mui-active">
					<div id="scroll"  >
						<div class="mui-scroll">
							<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
								<li class="mui-table-view-cell">
									<div class="mui-table">
										<div class="mui-table-cell mui-col-xs-10">
											<a class="mui-navigate-right" href="#" onclick="goIndex()">
												<h4 class="mui-ellipsis">任务标题12345672</h4>
												<h5>主任(福彩中心)->市场2(市场2部)</h5>
												<h5 style="color:#FF6600">状态：未完成</h5>
											</a>
										</div>
									</div>
								</li>
								<li class="mui-table-view-cell">
									<div class="mui-table">
										<div class="mui-table-cell mui-col-xs-10">
											<a class="mui-navigate-right" href="#" onclick="goIndex()">
												<h4 class="mui-ellipsis">任务标题12345672</h4>
												<h5>发布人：主任(福彩中心)</h5>
												<p class="mui-h6 mui-ellipsis" style="color:#FF0000">状态：未完成-已超时</p>
											</a>
										</div>
									</div>
								</li>
								<li class="mui-table-view-cell">
									<div class="mui-table">
										<div class="mui-table-cell mui-col-xs-10">
											<a class="mui-navigate-right" href="#" onclick="goIndex()">
												<h4 class="mui-ellipsis" >任务标题12345672</h4>
												<h5>主任(福彩中心)->市场2(市场2部)</h5>
												<p class="mui-h6 mui-ellipsis" style="color:#FF6600">状态：未完成</p>
											</a>
										</div>
									</div>
								</li>
								<li class="mui-table-view-cell">
									<div class="mui-table">
										<div class="mui-table-cell mui-col-xs-10">
											<a class="mui-navigate-right" href="#" onclick="goIndex()">
												<h4 class="mui-ellipsis">任务标题12345672</h4>
												<h5>主任(福彩中心)->市场2(市场2部)</h5>
												<p class="mui-h6 mui-ellipsis" style="color:#FF0000">状态：未完成-已超过</p>
											</a>
										</div>
									</div>
								</li>
								<li class="mui-table-view-cell">
									<div class="mui-table">
										<div class="mui-table-cell mui-col-xs-10">
											<a class="mui-navigate-right" href="#" onclick="goIndex()">
												<h4 class="mui-ellipsis">任务标题12345672</h4>
												<h5>主任(福彩中心)->市场2(市场2部)</h5>
												<p class="mui-h6 mui-ellipsis" style="color:#FF6600">状态：未完成</p>
											</a>
										</div>
									</div>
								</li>
								<li class="mui-table-view-cell">
									<div class="mui-table">
										<div class="mui-table-cell mui-col-xs-10">
											<a class="mui-navigate-right" href="#" onclick="goIndex()">
												<h4 class="mui-ellipsis">任务标题12345672</h4>
												<h5>主任(福彩中心)->市场2(市场2部)</h5>
												<p class="mui-h6 mui-ellipsis" style="color:#FF6600">状态：未完成</p>
											</a>
										</div>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div id="item2" class="mui-control-content">
					<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
						<li class="mui-table-view-cell">
							<div class="mui-table">
								<div class="mui-table-cell mui-col-xs-10">
									<a class="mui-navigate-right" href="#" onclick="goIndex()">
										<h4 class="mui-ellipsis">已完成任务标题12345672</h4>
										<h5>主任(福彩中心)->市场2(市场2部)</h5>
										<h5 style="color:#4CD964">状态：已完成</h5>
									</a>
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="mui-table">
								<div class="mui-table-cell mui-col-xs-10">
									<a class="mui-navigate-right" href="#" onclick="goIndex()">
										<h4 class="mui-ellipsis">任务标题12345672</h4>
										<h5>发布人：主任(福彩中心)</h5>
										<p class="mui-h6 mui-ellipsis" style="color:#4CD964">状态：已完成</p>
									</a>
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="mui-table">
								<div class="mui-table-cell mui-col-xs-10">
									<a class="mui-navigate-right" href="#" onclick="goIndex()">
										<h4 class="mui-ellipsis" >任务标题12345672</h4>
										<h5>主任(福彩中心)->市场2(市场2部)</h5>
										<p class="mui-h6 mui-ellipsis" style="color:#4CD964">状态：已完成</p>
									</a>
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="mui-table">
								<div class="mui-table-cell mui-col-xs-10">
									<a class="mui-navigate-right" href="#" onclick="goIndex()">
										<h4 class="mui-ellipsis">任务标题12345672</h4>
										<h5>主任(福彩中心)->市场2(市场2部)</h5>
										<p class="mui-h6 mui-ellipsis" style="color:#4CD964">状态：已完成</p>
									</a>
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="mui-table">
								<div class="mui-table-cell mui-col-xs-10">
									<a class="mui-navigate-right" href="#" onclick="goIndex()">
										<h4 class="mui-ellipsis">任务标题12345672</h4>
										<h5>主任(福彩中心)->市场2(市场2部)</h5>
										<p class="mui-h6 mui-ellipsis" style="color:#4CD964">状态：已完成</p>
									</a>
								</div>
							</div>
						</li>
						<li class="mui-table-view-cell">
							<div class="mui-table">
								<div class="mui-table-cell mui-col-xs-10">
									<a class="mui-navigate-right" href="#" onclick="goIndex()">
										<h4 class="mui-ellipsis">任务标题12345672</h4>
										<h5>主任(福彩中心)->市场2(市场2部)</h5>
										<p class="mui-h6 mui-ellipsis" style="color:#4CD964">状态：已完成</p>
									</a>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			(function($) {
				$('#scroll').scroll({
					indicators: true //是否显示滚动条
				});
				var segmentedControl = document.getElementById('segmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if (this.checked) {
						var styleEl = document.querySelector('input[name="style"]:checked');
						var colorEl = document.querySelector('input[name="color"]:checked');
						if (styleEl && colorEl) {
							var style = styleEl.value;
							var color = colorEl.value;
							segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
						}
					}
				});
			})(mui);
			
			function goIndex(){
				plus.webview.open('taskIndex.html', 'new', {}, 'slide-in-right', 200);
			}
			function goAdd(){
				plus.webview.open('taskAdd.html', 'new', {}, 'slide-in-right', 200);
			}
		</script>

	</body>

</html>